<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="zh-cn">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Amaze UI Touch</title>
	<meta name="renderer" content="webkit">
	<!-- No Baidu Siteapp-->
	<meta http-equiv="Cache-Control" content="no-siteapp">
	<link rel="alternate icon" type="image/png" href="i/favicon.png">
	<link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
	<meta name="apple-mobile-web-app-title" content="AMUI React">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
body {
	height: 100%;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

.box {
	height: 100%;
	background: #ff0000;
	position: absolute;
	width: 100%;
}
</style>
<body style="margin: 0;background-color: #1a1a1a;color: #fff;">
音量控制<input id="volume" type="range" min="0" max="100" value="60">
<input type="button" value="播放" onclick="load();">
歌曲名称：
<div style="width: 200px; height: 130px;" id="title">
	<canvas id="titleCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
		Your browser does not support the HTML5 canvas tag.</canvas>

</div>
<div id="box" style="width: 900px; height: 910px;background-color: #93a1a1;"></div>

</body>

<script type="text/javascript">

	// 创建XMLHttp对象
    var xhr = new XMLHttpRequest();

    // 创建Audio上下文对象
    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
    var ac = new window.AudioContext();

    // GainNode对象，改变音频音量大小的对象
    var gainNode = ac[ac.createGain?"createGain":"createGainNode"]();
    gainNode.connect(ac.destination);

    // Analyser 音频分析对象
    var analyser = ac.createAnalyser();
    var size = 32;
    analyser.fftSize = size * 2;
    analyser.connect(gainNode);


	function $(s) {
	    return document.querySelectorAll(s);
	}

	var box = $("#box")[0];
	var height, width;
	var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
	box.appendChild(canvas);

	function initTile () {
        var c=document.getElementById("titleCanvas");
        var ctxt=c.getContext("2d");

        ctxt.font="30px Verdana";
		// 创建渐变
        var gradient=ctxt.createLinearGradient(0,0,c.width,0);
        gradient.addColorStop("0","#0000FF");
        gradient.addColorStop("0.5","#C0C0C0");
        gradient.addColorStop("1.0","#FFFF00");
		// 用渐变进行填充
        ctxt.strokeStyle=gradient;
        ctxt.strokeText("歌曲名称!",10,50);
	}

    initTile();

	function resize () {
        drawCircle();
	    height = box.clientHeight;
	    width = box.clientWidth;
	    canvas.height = height;
		canvas.width = width;
        var line = ctx.createLinearGradient(0, 0, 0, height);
        line.addColorStop(0, "red");
        line.addColorStop(0.5, "yellow");
        line.addColorStop(1, "green");
        ctx.fillStyle = line;

	}

	resize();

	window.onresize = resize;


    function random (m, n) {
        return Math.round(Math.random() * (n - m) + m);
    }

    var Dots = [];
    function drawCircle() {
        Dots = [];
        for(var i = 0; i < size; i++) {
            var x =  random(0, width);
            var y = random(0, height);
            var color = "reg(" + random(0, 255) + "," + random(0, 160) + "," + random(0, 255) + ");"
            Dots.push({
                x: x,
                y: y,
                color: color
            })
        }
    }
    drawCircle();

	function draw(arr) {
        ctx.clearRect(0, 0, width, height);
	    var w = width / size;
		for(var i = 0; i < size; i++) {
		    if(draw.type == "column"){
                var h = arr[i] / 256 * height;
                ctx.fillRect(w * i, height - h, w*0.6, h);
			}else if(draw.type == "circle") {
                ctx.beginPath();
		        var o = Dots[i];
		        var r = arr[i] / 256 * 70;
		        ctx.arc(o.x, o.y, r, 0, Math.PI * 2, true);
                ctx.strokeStyle = StrokeColor;
                ctx.stroke();
			}

		}
    }

    var StrokeColor = "#fff";
    function getStrokeColor() {
        StrokeColor = "rgb(" + random(0, 160) + "," + random(0, 160) + "," + random(0, 255) + ")";
	}

	setInterval(getStrokeColor, 5000);

    draw.type = "column";


	var url = "/static/audioapi/data/audio3.mp3";
	//url ="http://lhttp.qingting.fm/live/1609/64k.mp3";
	//url = "https://m10.music.126.net/20180826131016/8ea1725c8a5ab8f5d09ebab5c7f6c32a/ymusic/bb7f/d5d8/b076/c2c69c08cc64b8de56f6b2581d450bc8.mp3";
	//url = "https://m7.music.126.net/20180826140323/1a4213b9c5e27f3239fc49c84f15dd20/ymusic/554d/31ec/85af/bd09b77a3fc697fe77b38af113b26bd0.mp3";


    /**
	 * 从服务端获取音频数据
     */
	function load() {
        xhr.open("GET", url);
        xhr.responseType = "arraybuffer";
        xhr.onload = function(){
            console.log(23);
            // 解码并播放音频资源
            ac.decodeAudioData(xhr.response, function(buffer){

                console.log(buffer);

                var bufferSource = ac.createBufferSource();
                bufferSource.buffer = buffer;
                bufferSource.connect(analyser);
                //bufferSource.connect(gainNode);//由于gainNode已经绑定到了ac.destination，所以无需绑定
                //bufferSource.connect(ac.destination);  由于GainNode已经绑定到了ac.destination，所以无需绑定
                bufferSource[bufferSource.start?"start":"noteOn"](0);
			}, function(error){
				console.log(error);
			});
        }
        xhr.send();
	}



	function visualizer() {
		var arr = new Uint8Array(analyser.frequencyBinCount);
        //AnalyserNode接口的getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。


        requestAnimationFrame = window.requestAnimationFrame ||
								window.webkitRequestAnimationFrame ||
								window.mozRequestAnimationFrame;
        function v () {
            analyser.getByteFrequencyData(arr);

            draw(arr);
            requestAnimationFrame(v);
		}
        requestAnimationFrame(v);
	}

    visualizer();

	function changeVolume (val) {
	    gainNode.gain.value = val * val;
	}

	$("#volume")[0].onchange = function() {
		changeVolume(this.value / this.max)
	}
    $("#volume")[0].onchange();

</script>
</html>
